<template>
  <div id="message">
    <div id="echartsss" style="width:100%;height:300px;"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
  name: 'message',
  data(){
    return{
      // 七天留言时间显示
      sevenDay:[],
      // 七天留言数据显示
      sevenData:[
        0,0,0,0,0,0,0
      ]
    }
  },
  methods:{
     // 图表
    chartOne(){
    // 获取容器
    let myChart = echarts.init(document.getElementById("echartsss"))
    // 绘制图表
    myChart.setOption({
      title: { text: "总留言趋势" },
      tooltip: {},
      xAxis: {
        data: this.sevenDay,
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: this.sevenData,
        },
      ],
    })
    },
    // 获取数据
    async getMessageData(){
      let {data} = await this.$axios.post("/getMes")
      data.data.forEach(item=>{
       for(let i=0;i<7;i++){
         if(this.conversionDate(item.date) === this.sevenDay[i]){
            this.sevenData[i]++
          }
       }
      })
      // 渲染图表
      this.chartOne()
    },
     // 日期转化
    conversionDate(time1){
      let time = new Date(time1)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${month}-${day}`
      
    },
    // 计算七天以内
    countSevenDay(){
      let date = Date.now()
      for(let i=6;i>=0;i--){
        this.sevenDay[i] = this.conversionDate(date)
        date = date-86400000
      }
      // 渲染图表
      this.chartOne()
    }
  },
  mounted(){
    this.getMessageData()
    // 七天以内
    this.countSevenDay()
  }
}
</script>

<style scoped lang='less'>

</style>
